<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>web检测</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache, must-revalidate">
<!-- 新 Bootstrap 核心 CSS 文件 
jQuery文件。务必在bootstrap.min.js 之前引入
 最新的 Bootstrap 核心 JavaScript 文件 -->
<link rel="stylesheet" href="./js/bootstrap_3.3.5/css/bootstrap.css">
<script src="./js/jquery_1.11/jquery-1.11.3.min.js"></script>
<script src="./js/bootstrap_3.3.5/js/bootstrap.js"></script>
<!-- md5  -->
<script type="text/ecmascript" src="./js/md5/md5.js"></script>
<!-- alert  -->
<link href="./js/select/select.css" rel="stylesheet">

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet"
	href="../console/js/bootstrap_table/bootstrap-table.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="../console/js/bootstrap_table/bootstrap-table.min.js"></script>
<!-- highcharts  -->
<script src="./js/highcharts/highcharts.src.js"></script>
<!-- Latest compiled and minified Locales -->
<script
	src="../console/js/bootstrap_table/locale/bootstrap-table-zh-CN.min.js"></script>


</head>
<body>
	<div id="header"></div>
	<table data-toggle="table">
		<thead>
			<tr>
				<th>节点</th>
				<th>地址</th>
				<th>状态码</th>
				<th>响应时间</th>
				<th>阀值</th>
				<th>日期</th>
				<th>动作</th>
			</tr>
		</thead>
		<tbody id="mdata">
		</tbody>
	</table>
	<script>
		$.get("header.html", function(data) {
			$("#header").html(data);
		});
		var project = "/dt";
		function fdata() {
			$
					.ajax({
						type : "POST",
						url : project
								+ "/api/mn/om/queryUrlMetricWarnLastData.do",
						data : {},
						dataType : 'json',
						success : function(res) {
							var mdata = res.data;
							console.log(mdata);
							var htmlfill = "";
							for (var i = 0; i < mdata.length; i++) {
								htmlfill = htmlfill + "<tr>";
								htmlfill = htmlfill + "<td>"
										+ mdata[i].nodename + "</td>";
								htmlfill = htmlfill
										+ "<td style=\"width:100px\">"
										+ mdata[i].url + "</td>";
								htmlfill = htmlfill + "<td>" + mdata[i].status
										+ "</td>";
								htmlfill = htmlfill + "<td>"
										+ mdata[i].resp_time + "</td>";
								htmlfill = htmlfill + "<td>"
										+ mdata[i].threshold + "</td>";
								htmlfill = htmlfill + "<td>"
										+ mdata[i].inserttime + "</td>";

								htmlfill = htmlfill
										+ "<td><button onclick=\"chart('"
										+ mdata[i].node
										+ "','resp')\" style =\"margin-left:5px;\" type=\"button\" class=\"btn btn-default btn-xs\">响应时间</button>";

								htmlfill = htmlfill
										+ "<button onclick=\"chart('"
										+ mdata[i].node
										+ "','status')\" style =\"margin-left:5px;\" type=\"button\" class=\"btn btn-default btn-xs\">响应码</button>";

								htmlfill = htmlfill
										+ "<button onclick=\"delMetric('"
										+ mdata[i].node
										+ "','"
										+ mdata[i].id
										+ "')\" style =\"margin-left:5px;\" type=\"button\" class=\"btn btn-default btn-xs\">删除</button>";

								htmlfill = htmlfill + "</td>"
								htmlfill = htmlfill + "</tr>";
							}
							$("#mdata").html(htmlfill);
						}
					});
		}
		fdata();

		function delMetric(node, id) {
			console.log("del:" + id);
			$.ajax({
				type : "POST",
				url : project + "/api/mn/om/deleteUrlMetricWarnData.do",
				data : {
					node : node,
					id : id
				},
				dataType : 'json',
				success : function(res) {
					if (res.success) {
						fdata();
					}
				}
			});
		}

		function flushdata(node, type) {
			var option = {
				"plotOptions" : {
					"spline" : {
						"marker" : {
							"enabled" : false
						},
						"lineWidth" : 1,
						"states" : {
							"hover" : {
								"lineWidth" : 1
							}
						}
					}
				},
				"yAxis" : {
					"min" : 0,
					"title" : {
						"text" : ""
					}
				},
				"xAxis" : {
					"type" : "datetime",
					"title" : {}
				},
				"credits" : {
					"enabled" : false
				},
				"series" : [ {
					name : "",
				} ],
				"subtitle" : {
					"text" : ""
				},
				"title" : {
					"text" : ""
				},
				"chart" : {
					"zoomType" : "x",
					"type" : "spline",
					"height" : 300
				}
			}
			console.log("node", node);
			console.log("type", type);
			$.ajax({
				type : "POST",
				url : project + "/api/mn/om/queryUrlMetricWarnDataForChart.do",
				data : {
					node : node,
					type : type
				},
				dataType : 'json',
				success : function(res) {
					var sdata = res.data;
					var hdata = {};
					hdata.name = sdata.col;
					hdata.data = sdata.data;
					option.series[0] = hdata;
					option.title = {
						text : sdata.name
					};
					showinit(option);
				}
			})
		}
		function showinit(option) {
			$('#chart').highcharts(option);
		}

		function chart(node, type) {
			console.log(node, type);
		
			$('#myModal').on('show.bs.modal', function () {
				flushdata(node, type);
				  // 执行一些动作...
				})
				
			// flushdata(node, type);
			$('#myModal').modal({
				keyboard : true,
				size : 'lg'
			})  
		}
	</script>

	<div id="myModal" class="modal fade  " tabindex="-1" role="dialog" style="margin-top:200px;text-align:center;width:100%"> 
		<div class="modal-dialog  modal-lg" role="document" style="width:95%">
			<div class="modal-content">
				<div class="modal-header" style="border-bottom:none">
					<button type="button" class="close" data-dismiss="modal"
						aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
					<h4 class="modal-title"></h4>
				</div>
					<div id="chart" style="width:90%;text-align:center; margin: 0 auto;"></div>
				<!-- <div class="modal-body" style="width:100%">
				
				</div> -->
				<!-- 	<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
					<button type="button" class="btn btn-primary">Save changes</button>
				</div> -->
			</div>
			<!-- /.modal-content -->
		</div>
		<!-- /.modal-dialog -->
	</div>
	<!-- /.modal -->
</body>
</html>